<template>
	<div class="container">
		<navigationBar :leftTitle="id? '编辑地址':'创建新地址'"></navigationBar>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight-1) + 'px;'">
			<div class="nav-list">
				<div class="nav-item">
					<div class="left">收货人</div>
					<div class="right">
						<input type="text" v-model="formData.name" placeholder="姓名" />
					</div>
				</div>
				<div class="nav-item">
					<div class="left">联系电话</div>
					<div class="right">
						<input type="number" v-model="formData.phone" placeholder="手机号码" />
					</div>
				</div>
				<div class="nav-item">
					<div class="left">所在地址</div>
					<div class="right" @click="addressPopup=true">
						<input type="text" style="pointer-events: none;" v-model="formData.address"
							placeholder="省、市、区、街道" />
						<image class="location" src="/static/icons/arrow-right.png" mode="aspectFit"></image>
					</div>
				</div>
				<div class="nav-item">
					<div class="left">详细地址</div>
					<div class="right">
						<input type="text" v-model="formData.addressDetail" placeholder="小区、门牌号等" />
					</div>
				</div>
				<div class="nav-item">
					<div class="left2">设置为默认地址</div>
					<div class="right2">
						<evanSwitch v-model="formData.isDefault" style="transform:scale(0.6)" />
					</div>
				</div>
			</div>
			<sx-address-picker v-model="addressPopup" :selected="selectedAddress" @confirm="addressConfirm" />
			<div class="footer">
				<div class="btn" @click="submit">
					保存地址
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import data from '@/js/my/createAddress/data.js';
	import methods from '@/js/my/createAddress/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	import sxAddressPicker from '@/components/sx-address-picker/sx-address-picker.vue';
	import evanSwitch from "@/components/evan-switch.vue";
	export default {
		data,
		methods,
		onLoad(e) {
			this.id = e.id;
			if (this.id) this.getPageData();

		},
		onShow() {},
		onHide() {},
		components: {
			navigationBar,
			evanSwitch,
			sxAddressPicker
		},
		computed: {
			...mapState(['navigationBarHeight'])
		}
	};
</script>
<style>
	page,
	uni-page {
		background: rgb(250, 250, 250) !important;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/my/createAddress.scss';
</style>